import React from 'react';
import {View, StyleSheet, FlatList, Platform} from 'react-native';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as orderActionCreator from '../../actions/order-actions';
import {connectActionSheet} from '@expo/react-native-action-sheet';
import ThemeStyles from '../../styles';
import {ConvertProduct, getRealSize, Touchable} from '../../utils';
import Separator from '../../components/separator';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import Product from '../../components/items/product';
import ListItem from '../../components/list-item';
import {ProductParams, ProductType} from '../../reducers/constant';
import {I18n} from '../../reducers/intl';

const snapPoints = [370];
class OrderProductScreen extends React.Component {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.orderProduct'),
  });

  state = {
    params: [],
  };

  setProductParams = item => {
    const {categories} = this.props;
    const product = ConvertProduct(item, categories);
    const params = [];
    params.push({label: I18n.t('product.name'), value: product.product.name});
    if (item.type === ProductType.fixed) {
      params.push({
        label: I18n.t(`product.type.${ProductType.fixed}`),
        value: product.type,
      });
    } else {
      params.push({
        label: I18n.t(`product.type.${ProductType.remvArch}`),
        value: product.type,
      });
    }
    Object.values(ProductParams[product.type]).forEach(param => {
      const value = product[param];
      if (value) {
        if (Array.isArray(value)) {
          params.push({
            label: I18n.t(`product.params.${param}`),
            value: value.map(v => (v ? v.name : '')).join(','),
          });
        } else {
          params.push({
            label: I18n.t(`product.params.${param}`),
            value: value.name,
          });
        }
      }
    });
    this.setState({params}, () => this.BottomSheet.present());
  };

  render() {
    const {
      categories,
      order: {items = []},
    } = this.props;
    return (
      <BottomSheetModalProvider>
        <View style={Styles.container}>
          <FlatList
            data={items}
            ItemSeparatorComponent={() => <Separator />}
            keyExtractor={item => `${item.id}`}
            renderItem={({item}) => (
              <Touchable onPress={() => this.setProductParams(item)}>
                <View>
                  <Product item={ConvertProduct(item, categories)} />
                </View>
              </Touchable>
            )}
          />
        </View>
        <BottomSheetModal
          ref={ref => {
            this.BottomSheet = ref;
          }}
          index={0}
          snapPoints={snapPoints}
          onChange={() => console.log('onChange')}>
          <BottomSheetScrollView>
            {this.state.params.map(param => (
              <ListItem label={param.label} extra={param.value} />
            ))}
          </BottomSheetScrollView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    );
  }
}

const mapStateToProps = state => ({
  appState: state.appState,
  user: state.user,
  order: state.order,
  categories: state.constant.category,
});

const mapDispatchToProps = dispatch => ({
  orderActions: bindActionCreators(orderActionCreator, dispatch),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(connectActionSheet(OrderProductScreen));

const Styles = StyleSheet.create({
  container: {
    ...ThemeStyles.Color.background.white,
    paddingHorizontal: getRealSize(15),
  },
});
